﻿<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Several thumbnails upload example</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
Sample: <b>severalthumbnails.html</b>&nbsp;&nbsp;<a href="javascript:location.reload(true);"><img border="0" src="images/refresh.png" width="16" height="16">&nbsp;Refresh frame</a>&nbsp;&nbsp;<a target="_parent" href="index.htm"><img border="0" src="images/home.png" width="16" height="16">&nbsp;Examples home</a><br/><br/>

<!-- text below wil be shown if JavaScript disabled at browser -->
<span id="noscriptdiv" style="border:1px  solid #FF0000;display:block;padding:5px;text-align:left; background: #FDF2F2;color:#000;">Active Scripting (JavaScript) should be enabled in your browser for this application to function properly!</span>
<script type="text/javascript">
	document.getElementById('noscriptdiv').style.visibility = 'hidden';
	document.getElementById('noscriptdiv').style.height = 0;
	document.getElementById('noscriptdiv').style.padding = 0;
	document.getElementById('noscriptdiv').style.border = 0;
</script>


This example shows the possibility of generating several types of thumbnails for each image file. 
<br>
For the  example you need to specify script URL that accept the files. Open the example  in a text editor and specify the property value &quot;uploadUrl&quot; of  MultiPowUpload object and embed tags. The value can be: 
<ul>
  <li>For ASP: <code>FileProcessingScripts/ASP/ClearASP/uploadfiles.asp</code></li>
  <li>For PHP : <code>FileProcessingScripts/PHP/uploadfiles.php</code>&nbsp;<strong>(Default value)</strong></li>
  <li>For ASP.NET (C Sharp): <code>FileProcessingScripts/ASP.NET/CSharp/uploadfiles.aspx</code></li>
  <li>For ASP.NET (VB.NET): <code>FileProcessingScripts/ASP.NET/VBNET/uploadfiles.aspx</code></li>
   <li>For Perl : <code>FileProcessingScripts/PERL/uploadfiles.pl</code></li>
   <li>For Cold Fusion : <code>FileProcessingScripts/ColdFusion/uploadfiles.cfm</code></li>
   <li>For JSP : <code>FileProcessingScripts/JSP/uploadfiles.jsp</code></li>
</ul>
 
<br><br>
<div id="MultiPowUpload_holder">
<strong>You need at least 10 version of Flash player!</strong>
<a href="http://www.adobe.com/go/getflashplayer">&nbsp;<img border="0" src="images/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
<!-- SWFObject home page: http://code.google.com/p/swfobject/
You can replace src value with the http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js (Most users has such file cached)
 -->
<script type="text/javascript" src="Extra/swfobject.js"></script>
<script type="text/javascript">
	var params = {  
		BGColor: "#FFFFFF"
	};
	
	var attributes = {  
		id: "MultiPowUpload",  
		name: "MultiPowUpload"
	};
	
	var flashvars = {	
	  "serialNumber": "put your serial number here",	
	  "uploadUrl": "FileProcessingScripts/PHP/uploadfiles.php",
	  "fileFilter.types":"Images|*.jpg:*.jpeg:*.gif:*.png",
	  "sendThumbnails": "true",
	  "sendOriginalImages": "false",
	  "fileView.defaultView":"thumbnails",
	  "useExternalInterface": "true",
	  "thumbnail.width": "160",
	  "thumbnail.height": "120",
	  "thumbnail.resizeMode": "fit",
	  "thumbnail.format": "JPG",
	  "thumbnail.jpgQuality": "85",
	  "thumbnail.backgroundColor": "#000000",
	  "thumbnail.transparentBackground": "true",
	  "thumbnail.autoRotate": "true",
	  "readImageMetadata":"true",
	  "thumbnailView.allowRotate":"true",
	  "thumbnailView.allowCrop":"true"
	  
	};

	swfobject.embedSWF("ElementITMultiPowUpload.swf", "MultiPowUpload_holder", "450", "350", "10.0.0", "Extra/expressInstall.swf", flashvars, params, attributes);
</script>



<script type="text/javascript">	
	var path_to_file = "";
	var cancelled = false;
	
	function MultiPowUpload_onStart()
	{
		cancelled = false;
	} 
	
	function MultiPowUpload_onCancel()
	{
		cancelled = true;
	} 
        
	//dimensions for different thumbnails
	var sizes = new Array();					
	sizes[0] = new Array(100, 100);
	sizes[1] = new Array(300, 300);
	sizes[2] = new Array(600, 600);
	//prefixes for different thumbnails
	var prefixes = new Array("tiny_", "medium_", "large_");
	
				
	var currentCycle = 0;
							   
	function MultiPowUpload_onMovieLoad()
	{        
		//set initial thumbnails dimensions
		setThumbailDimensions(currentCycle);
	}
            
	function setThumbailDimensions(index) 
	{	
		if(sizes.length > index)
		{			
			MultiPowUpload.setParameter("thumbnail.height", sizes[index][0]);	
			MultiPowUpload.setParameter("thumbnail.width", sizes[index][1]);
			MultiPowUpload.setParameter("thumbnail.fileName", prefixes[index]+"<FILENAME>");
		}
	}

	
	
	function MultiPowUpload_onComplete()
	{			
		//upload finished let's check what we shpould do now
		
		currentCycle++;			
		setThumbailDimensions(currentCycle);						
		if(sizes.length > currentCycle)
		{
			if(!cancelled)
				MultiPowUpload.uploadAll();   			
		}
		else
		{		
			currentCycle = 0;
			setThumbailDimensions(currentCycle);
		}
		
	}
	
	function MultiPowUpload_onThumbnailUploadComplete(li, response)
	{
		//after first cycle reset crop rect
		/*if(currentCycle == 0)
			MultiPowUpload.resetImageCrop(li.id);*/
		
		//get current file processing script and combine path to file
		path_to_file = MultiPowUpload.getParameter("uploadUrl");		
		path_to_file = path_to_file.substring(0, path_to_file.lastIndexOf("/")+1) + "UploadedFiles/";
		
		//Here we need parse server response
		//and find url to uploaded thumbnails	
		
		var keyword = 'File ';
		var keywor_end = " was successfully uploaded";
		var ind = response.indexOf(keyword,0);				
		while(ind>=0)
		{
			url = response.substring(ind+keyword.length, response.indexOf(keywor_end, ind));			
			addThumbnail(url);
			ind = response.indexOf(keyword, ind+keyword.length+1); 
		}		
	}
	
	function addThumbnail(source)
	{
		var Img = document.createElement("img");
		Img.style.margin = "5px";

		Img.src = path_to_file+source+"?"+(new Date()).getTime();;
		
		document.getElementById("thumbnails").appendChild(Img);
	}
</script>
<div id="thumbnails"></div>
<br />
The file uploader doesn’t work? See <a target="_blank" href="http://www.element-it.com/OnlineHelpMulti/MultiPowUpload_Manual_HTML/Troubleshooting.html">here</a> what you need for its proper work. 
<br /><br />

</body>
</html>